<template>
  <view>
    <view class="container">

      <!-- 头部评论置顶 -->
      <view class="header">评论区({{totalCount}})</view>

      <scroll-view class="scrollContainer" scroll-y scroll-with-animation @scrolltolower="ScrollLower">
        <view class="commentContainers">
          <view class="herderList" v-for="(item,i) in commentList" :key="i">
            <!-- 头像 -->
            <image class="avatar" :src="item.user.avatarUrl">
            </image>
            <view class="herderListRight">
              <!-- nick -->
              <view class="ndz">
                <view>
                  <view class="nickName">{{item.user.nickname}}</view>
                  <view class="date">{{item.time}}</view>
                </view>
                <view> <text>{{item.likedCount}}</text>
                  <uni-icons v-if="showHandUp" @click="handup(item.commentId)" type="hand-up" color="red" size="23">
                  </uni-icons>
                  <uni-icons v-else @click="handup(item.commentId)" type="hand-up" size="23"></uni-icons>

                </view>
              </view>
              <!-- 评论容器 -->
              <view class="commentContainer">
                <!-- 评论内容 -->
                <view class="commentContent">
                  {{item.content}}
                </view>
                <!-- 回复 -->

                <view class="reply" v-if="item.showFloorComment.replyCount" @click="clickReply(item.commentId)">
                  {{item.showFloorComment.replyCount}}条回复 >
                </view>
                <view class="reply" @click="clickReply(item.commentId)" v-else>0条回复 ></view>

              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- 遮罩层 -->
      <view class="mask" v-if="showMask" @click="clickMask"></view>
      <view class="floorCommentContainer " :class="[showReply?'showfloorCommentContainer,':'']">
        <view class="floorContainerHeader ">
          <uni-icons type="back" size="30"></uni-icons>
          <view class="header">回复({{floorTotleCount}})</view>
        </view>
        <scroll-view class="floorScrollContainer" scroll-y scroll-with-animation @scrolltolower="floorScrollLower">
          <!-- 原评论 -->
          <view class="floorOrigin">
            <view class="herderList">
              <!-- 头像 -->
              <image class="avatar" :src="ownerComment.user.avatarUrl">
              </image>
              <view class="herderListRight">
                <!-- nick -->
                <view class="ndz">
                  <view>
                    <view class="nickName">{{ownerComment.user.nickname}}</view>
                    <view class="date">{{ownerComment.time}}</view>
                  </view>
                  <view><text>{{item.likedCount}}</text>
                    <uni-icons v-if="showHandUp" @click="handup" type="hand-up" color="red" size="23"></uni-icons>
                    <uni-icons v-else @click="handup" type="hand-up" size="23"></uni-icons>
                  </view>
                </view>
                <!-- 评论容器 -->
                <view class="commentContainer">
                  <!-- 评论内容 -->
                  <view class="commentContent">
                    {{ownerComment.content}}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 隔层 -->
          <view class="separate"></view>
          <!-- 楼层回复 -->
          <view class="replyComment">
            <view class="allreply"> 全部回复</view>
            <view class="herderList" v-for="(item,i) in floorCommentList " :key="i">
              <!-- 头像 -->
              <image class="avatar" :src="item.user.avatarUrl">
              </image>
              <view class="herderListRight">
                <!-- nick -->
                <view class="ndz">
                  <view>
                    <view class="nickName">{{item.user.nickname}}</view>
                    <view class="date">{{item.time}}</view>
                  </view>
                  <view><text>{{item.likedCount}}</text>
                    <uni-icons v-if="showHandUp" @click="handup" type="hand-up" color="red" size="23"></uni-icons>
                    <uni-icons v-else @click="handup" type="hand-up" size="23"></uni-icons>
                  </view>
                </view>

                <!-- 评论容器 -->
                <view class="commentContainer">
                  <!-- 评论内容 -->
                  <view class="commentContent">
                    {{item.content}}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="loadingContainer">
            <image class="gif" src="../../static/images/加载.gif" v-show="isFloorLoad"></image>
            <!-- <uni-load-more iconType="circle" v-show="isFloorLoad" status="load"></uni-load-more> -->
          </view>
          <view class="commentTip" v-if="isFloorLoad===false">下面没有评论了哦</view>
        </scroll-view>
      </view>
      <view class="send"> <input type="text" @input='inputcontext' class="uni-input" focus
          placeholder="听了这么多,可能有你想说的" />
        <view class="mini-btn" @click="send">发送</view>
      </view>
    </view>
  </view>
</template>

<script>
  import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
  import moment from 'moment';
  export default {
    components: {

      mSearch
    },
    name: "commentList",
    props: {
      musicId: {
        type: String,
        default: ''
      }
    },
    mounted() {
      // 调用歌曲评论借口
      // console.log(this.musicId)
      this.getMusicComment()
    },
    watch: {
      showReply() {
        if (this.showReply) {
          // 这里打开了谈出层那么我们就吧t变为2 回复
          this.t = 2
          console.log(this.t)
        } else {
          this.t = 1
          console.log(this.t)
        }
        // 点赞是给谁点赞

      }
    },
    data() {

      return {
        // 遮罩层是否显示
        showMask: false,
        showReply: false,
        // pageNo:分页参数,第 N 页,默认为 1
        pageNo: 1,
        // 评论列表
        commentList: [],
        totalCount: 0,
        // 原评论列表
        ownerComment: [],
        // 楼层总数量
        floorTotleCount: 0,
        // 楼层评论列表
        floorCommentList: [],
        // floor时间
        floorlastTime: '',

        // 评论的id
        commentId: 0,
        isFloorLoad: false,
        content: '',
        t: 1,
        showHandUp: false
      };
    },

    methods: {
      // 点赞
      async handup(commentId) {
        // console.log(commentId)
        this.showHandUp = !this.showHandUp
        // 点赞请求
        const {
          res: data
        } = await uni.$http.get('/comment/like?id=' + this.musicId + '&cid=' + commentId + '&t=1&type=0')
        console.log(data)
      },

      // 输入内容发送
      inputcontext(event) {
        console.log(event.detail.value)
        this.content = event.detail.value.trim()
      },
      // 发送
      async send() {
        let {
          data: res
        } = await uni.$http.get('/comment?t=' + this.t + '&type=0&id=' + this.musicId + '&content=' + this.content +
          '&commentId=' + this.commentId)
        console.log(res)
        // 发送以后获取到信息
        // 把时间格式化
        res.comment.time = moment(res.comment.time).format('yyyy年M月DD日');
        if (res.code !== 200) {
          return uni.$showMsg()
        }
        if (this.t === 2) {
          let arr = this.floorCommentList.unshift(res.comment)
        } else {
          let arr = this.commentList.unshift(res.comment)
        }
        // console.log(arr)
        this.content = ''

      },
      // 页面滑动
      ScrollLower() {
        this.getMusicComment()
      },
      // 获取歌曲评论
      async getMusicComment() {
        const {
          data: res
        } = await uni.$http.get('/comment/new?type=0&id=' + this.musicId + '&sortType=2&pageSize=20&pageNo=' + this
          .pageNo)
        // console.log(res)
        if (res.code !== 200) {
          return uni.$showMsg()
        }
        // 获取评论的id
        // this.commentcid=res.data.comments.commentId
        // 页面加1
        this.pageNo++
        // 获取评论总数量
        this.totalCount = res.data.totalCount
        // 判断是否加载完
        if (this.pageNo * 20 >= this.totalCount) {
          return this.isFloorLoad = false
        } else {
          this.isFloorLoad = true
        }
        // 把时间格式化
        res.data.comments.forEach(item => {
          item.time = moment(item.time).format('yyyy年M月DD日');
        })

        this.commentList = [...res.data.comments, ...this.commentList]
        // console.log(this.commentList)
      },
      // 下拉调用分页数据加一
      //点击调用
      async clickReply(commentId) {
        this.showMask = !this.showMask
        this.showReply = !this.showReply
        this.commentId = commentId
        // console.log(this.musicId)
        // 这里调用楼层评论接口
        const {
          data: res
        } = await uni.$http.get('/comment/floor?parentCommentId=' + commentId + '&id=' +
          this.musicId +
          '&type=0&limit=10')
        // console.log(res)
        // 是否显示加载效果
        if (res.data.comments.length < 10 || res.data.comments.length == 0) {
          return this.isFloorLoad = false
        }
        // 获取总数量
        this.floorTotleCount = res.data.totalCount
        // 获取到原评论的数据并且把时间格式化
        res.data.ownerComment.time = moment(res.data.ownerComment.time).format('yyyy年M月DD日');
        this.ownerComment = res.data.ownerComment
        console.log(this.ownerComment)
        // 获取取上一页最后一项的 time 获取下一页数据
        this.floorlastTime = res.data.comments[res.data.comments.length - 1].time
        // console.log(this.floorlastTime)
        // 获取楼层评论
        res.data.comments.forEach(item => item.time = moment(item.time).format('yyyy年M月DD日'))
        this.floorCommentList = res.data.comments
        // console.log(this.floorCommentList)
      },
      // 滚到底部开始加载
      async floorScrollLower() {
        // 这里调用楼层评论接口
        // console.log(this.floorlastTime)
        if (this.floorlastTime) {
          // console.log('1111')
          const {
            data: res
          } = await uni.$http.get('/comment/floor?parentCommentId=' + this.commentId + '&id=' +
            this.musicId +
            '&type=0&limit=10&time=' + this.floorlastTime)
          // 是否显示加载效果
          if (res.data.comments.length) {
            this.isFloorLoad = true
          } else {
            this.isFloorLoad = false
          }
          // 更新最后的时间
          this.floorlastTime = res.data.comments[res.data.comments.length - 1].time
          console.log(res)
          // 时间格式化
          res.data.comments.forEach(item => item.time = moment(item.time).format('yyyy年M月DD日'))

          // 合并数据
          this.floorCommentList = [...this.floorCommentList, ...res.data.comments]
          console.log(this.floorCommentList)
        }
      },
      clickMask() {
        // 关闭对话框
        this.showMask = !this.showMask
        this.showReply = !this.showReply
      }



    }
  }
</script>

<style>
  .send {

    background-color: #fff;
  }

  .text {
    color: #bebebe;
  }

  .mini-btn {
    background-color: #fff;
    height: 110rpx;
    width: 200rpx;
    text-align: center;

    /* 设置定位效果为“吸顶” */
    position: sticky;
    line-height: 116rpx;
    position: absolute;
    left: 70%;
    top: 85%;
    color: #0000009e;
    z-index: 999
  }



  .uni-input {

    /* 设置定位效果为“吸顶” */
    position: sticky;
    background-color: #fff;
    height: 110rpx;
    width: 44vh;
    margin: auto;
    position: absolute;
    top: 85%;
    left: 0%;
    text-align: center;
    z-index: 999;
    padding-left: 13rpx;
  }

  .ndz {

    display: flex;
    align-items: center;
    justify-content: space-between;

  }

  .gif {
    height: 69rpx;
    width: 69rpx;
  }

  .separate {
    background-color: #f8f8f8;
    width: 100%;
    height: 20rpx;
  }

  .container {
    position: relative;
    ;
  }

  .replyComment {
    display: flex;
    flex-direction: column;

  }

  .allreply {
    padding-left: 60rpx;
    margin-top: 10rpx;
    font-size: 28rpx;
  }

  .floorContainerHeader {
    display: flex;
    align-items: center;
  }

  .scrollContainer {
    height: 100vh;
  }

  .header {
    font-weight: bold;
    margin-top: 30rpx;
    margin-bottom: 12rpx;
    margin-left: 60rpx;
  }

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .herderList {
    display: flex;
    margin-top: 30rpx;
    padding: 0 60rpx;

  }

  .herderListRight {
    margin-left: 20rpx;
    flex: 1;
    border-bottom: 1px solid #eee;
  }

  .herderListRight .nickName {
    font-size: 30rpx;

  }

  .herderListRight .date {
    font-size: 23rpx;
    color: gray;
  }

  .commentContainer {
    margin-top: 20rpx;
    margin-bottom: 30rpx;

  }

  .commentContent {
    line-height: 57rpx;
    font-size: 31rpx;
    color: black;

  }

  .reply {
    margin-top: 25rpx;
    color: #487491;
    ;
    font-size: 27rpx;
  }

  /* 遮罩层 */
  .mask {
    position: absolute;
    height: 110%;
    width: 100vh;
    top: -3%;
    left: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.3);

  }

  /* 楼层 */
  /*  .showfloorCommentContainer {
    transform: translateY(calc(250rpx - 100vh));
  }
 */


  .floorCommentContainer {
    position: absolute;
    top: 0%;
    left: 0;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    border-radius: 40rpx;
    background-color: #fff;
    width: 100%;
    height: calc(100vh -30rpx);
    overflow: hidden;

  }

  .showfloorCommentContainer {
    position: absolute;
    top: 70%;
    left: 0;
    z-index: 10;
    opacity: 1;
    visibility: visible;
    border-radius: 40rpx;
    background-color: #fff;
    width: 100%;
    height: calc(100vh -30rpx);
    overflow: hidden;
    transition: transform 0.4s linear;
    transform: translateY(-300px);
  }

  .floorScrollContainer {
    height: 80vh;
    margin-top: 20rpx;

  }

  .loadingContainer {
    width: 100%;
    text-align: center;
    margin: 50rpx 0 70rpx -30rpx;
  }

  .commentTip {
    color: #aaa;
    width: 100%;
    font-size: 26rpx;
    text-align: center;
    margin: -30rpx 0 60rpx -30rpx;
  }
</style>
